<!--新增试验委托-->
<template>
  <div class="app-container-add">
    <el-row :gutter="10" class="button-wrap">
      <el-col :span="1.5">
        <el-button icon="el-icon-arrow-left" size="mini" @click="handleReturn()">返回</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-clickForbidden
          icon="el-icon-document-checked"
          size="mini"
          @click="handleSave"
        >保存</el-button>
      </el-col>
    </el-row>
    <div ref="mainCont" class="main-content">
      <el-card class="box-card" shadow="never">
        <div class="main-content-body">
          <el-form
            ref="addForm"
            class="data-form"
            :model="formData"
            :rules="rules"
            label-width="80px"
          >
            <el-row :gutter="20">
              <el-col :lg="8" :xl="6">
                <el-form-item label="项目名称" prop="proName">
                  <el-input v-model="formData.proName" readonly size="medium" />
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="试验类型" prop="experimentType">
                  <el-select
                    v-model="formData.experimentType"
                    style="width:100%"
                    clearable
                    size="medium"
                    placeholder="请选择试验类型"
                  >
                    <el-option
                      v-for="item in TypeOptions"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="试验单位" prop="companyId">
                  <el-input
                    v-model="formData.enterpriseName"
                    readonly
                    size="medium"
                    @click.native="handleCompany"
                  />
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="委托单位" prop="clientEnterpriseId">
                  <el-input
                    v-model="formData.clientEnterpriseId"
                    placeholder="请输入委托单位"
                    size="medium"
                  />
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="联系人" prop="clientContacts">
                  <label slot="label" v-html="`联&ensp;系&ensp;人`" />
                  <el-input v-model="formData.clientContacts" placeholder="请输入联系人姓名" size="medium" />
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="联系电话" prop="contactsPhone">
                  <el-input v-model="formData.contactsPhone" placeholder="请输入联系人电话" size="medium" />
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="完成日期" prop="finishDate">
                  <el-date-picker
                    v-model="formData.finishDate"
                    style="width:100%"
                    type="date"
                    size="medium"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择要求完成日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label prop="experimentFileList">
                  <label slot="label" v-html="`委&ensp;托&ensp;单`" />
                  <FileUplode
                    ref="fileUplode"
                    :edit-file-list="experimentFileList"
                    :status="status"
                    @getFileList="getTrustDeed"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-form class="data-form" :inline="true" :model="filters" label-width="40px">
            <div class="two-level-title">勘探列表</div>
            <el-row>
              <el-col :span="24">
                <el-form-item label="编号">
                  <el-input v-model="filters.explorationCode" size="small" />
                </el-form-item>
                <el-form-item style="margin-left:5px" label="类型">
                  <el-select
                    v-model="filters.drillHole"
                    size="small"
                    filterable
                    placeholder="请选择勘探点类型"
                    clearable
                  >
                    <el-option
                      v-for="dict in explorationTypeList"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-button type="primary" size="medium" style="margin-left:10px" @click="getList">搜索</el-button>
              </el-col>
              <el-col :span="24">
                <el-table
                  ref="multipleTable"
                  :row-style="rowClass"
                  :data="tableData"
                  stripe
                  style="width: 100%;"
                  height="500px"
                  class="table-list"
                  size="mini"
                  @row-click="rowChecked"
                  @selection-change="handleSelection"
                >
                  <el-table-column type="selection" width="38" align="center" />
                  <el-table-column
                    prop="explorationCode"
                    label="编号"
                    min-width="160"
                    align="center"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    prop="explorationType"
                    label="类型"
                    min-width="120"
                    align="center"
                    :formatter="formatExplorationType"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    prop="x"
                    label="坐标经度"
                    min-width="60"
                    align="center"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    prop="y"
                    label="坐标纬度"
                    min-width="60"
                    align="center"
                    :show-overflow-tooltip="true"
                  />
                </el-table>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
    <orgnazition ref="orgnazition" @setCompany="setCompany" />
  </div>
</template>

<script>
import orgnazition from './orgnazition'
import { listNoExploration } from '@/api/projectManage/project/exploration'
import { validatePhone } from '@/utils/validate'
import {
  addTest,
  updateTest,
  getTestById
} from '@/api/projectManage/ProjectAllocation/testCommission'
// 上传文件
import FileUplode from '@/components/Upload/FileUplode'
import { mapState } from 'vuex'
// 系统字典
import { getSysDicts } from '@/api/common/getSysDicts' // 查询字典类行中的数据
export default {
  name: 'Add',
  components: {
    FileUplode,
    orgnazition
  },
  data() {
    return {
      explorationTypeList: [
        { value: '0', label: '钻探' },
        { value: '1', label: '静探' }
      ],
      experimentFileList: [], // 回显委托单
      status: '',
      tableData: [],
      filters: {
        explorationCode: '',
        drillHole: '',
        proId: ''
      },
      /* 表单 start */
      formData: {
        proId: '',
        proName: '', // 项目名称
        experimentType: '', // 试验类型
        companyId: '', // 试验单位
        enterpriseName: '',
        clientEnterpriseId: '', // 委托单位
        clientContacts: '', // 联系人
        contactsPhone: '', // 联系电话
        finishDate: '', // 完成日期
        experimentFileList: '', // 委托单
        explorationList: []
      },
      selectExplorationList: [],
      selectRow: [],
      rules: {
        proName: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        experimentType: [
          { required: true, message: '试验类型不能为空', trigger: 'blur' }
        ],
        companyId: [
          { required: true, message: '试验单位不能为空', trigger: 'change' }
        ],
        clientEnterpriseId: [
          { required: true, message: '委托单位不能为空', trigger: 'blur' }
        ],
        clientContacts: [
          { required: true, message: '联系人不能为空', trigger: 'blur' }
        ],
        contactsPhone: [
          {
            required: true,
            message: '联系电话不能为空',
            validate: validatePhone,
            trigger: 'blur'
          }
        ],
        finishDate: [
          { required: true, message: '完成日期不能为空', trigger: 'blur' }
        ],
        experimentFileList: [
          { required: true, message: '委托单不能为空', trigger: 'blur' }
        ]
      },
      TypeOptions: []
      /* 表单 end */
    }
  },
  computed: {
    ...mapState({
      explorationType: state => state.basicInfo.explorationType // 勘探点类型全部
    })
  },
  mounted() {
    this.getTypeOptions()
    const { proId, proName, id } = this.$route.query
    this.formData.proId = proId
    this.formData.proName = proName
    this.filters.proId = proId
    this.getList()
    if (id) {
      this.handleDetail(id)
    }
  },
  methods: {
    // 试验类型
    async getTypeOptions() {
      const { data: { rows }} = await getSysDicts('sys_experiment_type')
      if (rows) this.TypeOptions = rows
    },
    // 翻译勘探点类型
    formatExplorationType(row) {
      if (row.explorationType) return this.selectDictLabel(this.explorationType, row.explorationType)
    },
    setCompany(row) {
      this.formData.enterpriseName = row.name
      this.formData.companyId = row.id
    },
    // 试验单位
    handleCompany() {
      if (this.formData.sysEnterpriseType && this.formData.companyId) {
        this.$refs.orgnazition.handleAdd('选择试验单位', this.formData.sysEnterpriseType, this.formData.companyId)
      } else {
        this.$refs.orgnazition.handleAdd('选择试验单位')
      }
    },
    async getList() {
      const { data: { rows }} = await listNoExploration(this.filters)
      this.tableData = rows
    },
    // 勘探点选择
    handleSelection(val) {
      this.selectExplorationList = val
      this.selectRow = []
      if (this.selectExplorationList.length > 0) {
        this.selectExplorationList.forEach((item, index) => {
          this.selectRow.push(this.tableData.indexOf(item))
        })
      }
    },
    // 点击行时,选框选中
    rowChecked(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    // 高亮样式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return {
          'background-color': 'rgba(185,221,249,.75)'
        }
      }
    },
    // 委托单
    getTrustDeed(fileList) {
      this.formData.experimentFileList = fileList
    },
    async handleDetail(id) {
      const { data } = await getTestById(id)
      this.formData = { ...this.formData, ...data }
      this.formData.enterpriseName = data.companyName
      if (data.experimentFileList && data.experimentFileList.length) {
        this.experimentFileList = data.experimentFileList
      }

      const selectIds = data.explorationList.map(item => item.id)

      this.tableData.forEach(item => {
        if (selectIds.includes(item.id)) {
          this.$refs.multipleTable.toggleRowSelection(item)
        }
      })
    },
    // 保存
    handleSave() {
      this.$refs.addForm.validate(async(valid) => {
        if (valid) {
          this.formData.proExperimentList = this.selectExplorationList.map(
            (item) => ({ explorationId: item.id })
          )
          if (this.formData.id) {
            await updateTest(this.formData)
            this.msgSuccess('修改成功')
            this.handleReturn()
          } else {
            await addTest(this.formData)
            this.msgSuccess('保存成功')
            this.handleReturn()
          }
        }
      })
    },
    // 返回
    handleReturn() {
      this.$router.go(-1)
    }
    /* 新增/编辑弹层 end*/
  }
}
</script>

<style lang="scss">
.data-form .el-form-item {
  margin: 0;
}
.removePadding th {
  padding: 0 !important;
}
</style>
